<template>
  <div>
    <el-table :data="columns" border stripe height="420">
      <el-table-column
        prop="columnComment"
        label="字段"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="display"
        label="默认显示"
        align="center"
        width="80"
      >
        <template #default="{ row }">
          <el-switch v-model="row.display" />
        </template>
      </el-table-column>
      <el-table-column prop="width" label="宽度" align="center" width="140">
        <template #default="{ row }">
          <el-input-number v-model="row.width" placeholder=""></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="showOverflowTooltip"
        label="显示tooltip"
        align="center"
        width="100"
      >
        <template #default="{ row }">
          <el-switch v-model="row.showOverflowTooltip" size="large" />
        </template>
      </el-table-column>
      <el-table-column prop="align" label="对齐方式" align="center" width="210">
        <template #default="{ row }">
          <el-radio-group v-model="row.align">
            <el-radio label="靠左" value="left"></el-radio>
            <el-radio label="居中" value="center"></el-radio>
            <el-radio label="靠右" value="right"></el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column prop="fixed" label="固定方式" align="center" width="140">
        <template #default="{ row }">
          <el-radio-group v-model="row.fixed">
            <el-radio label="靠左" value="left"></el-radio>
            <el-radio label="靠右" value="right"></el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column
        prop="sortable"
        label="是否排序"
        align="center"
        width="90"
      >
        <template #default="{ row }">
          <el-switch v-model="row.sortable" />
        </template>
      </el-table-column>
      <el-table-column
        prop="sortNo"
        label="显示顺序"
        align="center"
        width="140"
      >
        <template #default="{ row }">
          <el-input-number
            v-model="row.sortNo"
            placeholder=""
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="renderType"
        label="渲染组件"
        align="center"
        width="100"
      />
      <el-table-column
        prop="renderComponentConfig"
        label="组件属性"
        align="center"
        width="100"
        v-if="config.props.editable"
      >
        <template #default="scope">
          <el-button
            type="primary"
            icon="Edit"
            circle
            @click="handleOpenSetting(scope.$index, scope.row)"
            v-if="scope.row.renderType != 'Hidden'"
          />
        </template>
      </el-table-column>
    </el-table>
    <CommonDialog
      v-model="showSetting"
      width="40%"
      title="组件属性设置"
      append-to-body
      @ok="handleSettingConfirm"
      @cancel="showSetting = false"
    >
      <component
        :is="FormComponentConfigs[renderType]"
        v-model:config="renderConfig"
      />
    </CommonDialog>
  </div>
</template>
<script setup lang="ts">
import {
  type FormDesignerComponents,
  DefTableColumnSetting
} from "./FormComponentMixin";
import { FormComponentConfigs, FormItem } from "./FormComponents";
const columns = defineModel<DefTableColumnSetting[]>("columns");
const config = defineModel<FormDesignerComponents>("config");
const showSetting = ref(false);
const renderType = ref("TextInput");
const renderConfig = ref<FormDesignerComponents>();
const columnRowIndex = ref(-1);

const handleOpenSetting = (index: number, row: any) => {
  columnRowIndex.value = index;
  renderType.value = row.renderType;
  if (row.renderConfigJson) {
    renderConfig.value = row.renderConfigJson;
  } else {
    renderConfig.value = FormItem[row.renderType].create();
  }
  showSetting.value = true;
};

const handleSettingConfirm = () => {
  showSetting.value = false;
  if (columnRowIndex.value > -1) {
    config.value.props.columns[columnRowIndex.value].renderConfig =
      renderConfig.value;
  }
};
</script>
